<!--
 * @Author: ZCL
 * @Date: 2020-05-19 13:59:47
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-19 13:59:47
-->
<template>
  <!-- 盘点任务 -->
  <div class="inventoryTask">
    <div>
      <van-list
        v-if="inventoryList.length"
        v-model="loading"
        :finished="!canLoadMore"
        finished-text=" - 我是有底线的 -"
        @load="getInventoryList"
        :offset="num"
        >
        <van-steps
          active-color="#38f"
          direction="vertical"
          active-icon="clock-o"
          inactive-icon="clock-o"
        >
          <van-step v-for="(item,index) in inventoryList" :key="index">
            <div class="time">{{ item.c_start_time }}</div>
            <div class="time-box">
              <div class="title">{{ item.c_name }}</div>
              <div class="box">
                <p class="time-left">盘点开始时间:</p>
                <p class="time-right">{{ item.c_start_time }}</p>
              </div>
              <div class="box">
                <p class="time-left">盘点结束时间:</p>
                <p class="time-right">{{ item.c_end_time }}</p>
              </div>
              <div class="box">
                <p class="time-left">需要盘点资产数量:</p>
                <p class="time-right">{{ item.total }}件</p>
              </div>
              <div class="box">
                <p class="time-left">个人资产数量:</p>
                <p class="time-right">{{ item.users }}件</p>
              </div>
              <div class="box">
                <p class="time-left">部门资产数量:</p>
                <p class="time-right">{{ item.dept }}件</p>
              </div>
              <div class="box">
                <p class="time-left">已盘点:</p>
                <p class="time-right"><span class="num">{{ item.yes_check }}</span>件</p>
              </div>
              <div class="box box1">
                <p class="time-left">状态:</p>
                <div class="time-right flex">
                  <p v-if="item.c_is_start === 1" class="num">未开始</p>
                  <p v-if="item.c_is_start === 2" class="num2">盘点中</p>
                  <p v-if="item.c_is_start === 3" class="num">已暂停</p>
                  <p v-if="item.c_is_start === 4" class="num1">盘点完成</p>
                  <van-button round type="info" size="normal" class="btn"
                    v-if="item.c_is_start !== 4 && item.c_is_start !== 3"
                    :to="{
                      path: '/inventory-detail',
                      query: {
                        id: item.id
                      }
                    }">
                    开始盘点
                  </van-button>
                  <van-button round type="info" size="normal" class="btn"
                    v-if="item.c_is_start === 4"
                    :to="{
                      path: '/inventory-detail',
                      query: {
                        id: item.id,
                        c_is_start: item.c_is_start
                      }
                    }">
                    盘点详情
                  </van-button>
                </div>
              </div>
            </div>
          </van-step>
        </van-steps>
      </van-list>
      <van-empty
        v-if="!inventoryList.length"
        class="custom-image"
        :image="require('@/assets/icon/empty2.png')"
        description="暂无盘点任务"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { EDIT_TYPES } from '@/constant';

export default {
  name: 'InventoryTask',
  data () {
    return {
      EDIT_TYPES,
      page: 1,
      num: 10,
      loading: false, // 是否处于加载状态
      canLoadMore: true, // 是否已加载完成
      inventoryList: [] // 盘点任务列表
    };
  },
  computed: {
    ...mapGetters(['dept_id'])
  },
  methods: {
    // 获取盘点任务列表
    getInventoryList () {
      this.loading = true;
      let params = {
        num: this.num,
        dept_ids: this.dept_id
      };
      this.$api.getAssetCheckIndex(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.inventoryList = [...this.inventoryList, ...res.result.data];
          this.totalPage = Number(res.result.last_page);
          this.page++;
          if (this.page > this.totalPage) {
            this.canLoadMore = false;
          }
        }
      });
    }
  },
  created () {
    this.getInventoryList();
  }
};
</script>

<style lang="scss" scoped>
.inventoryTask {
  padding-bottom: 40px;
  background-color: #f8f9fd;
  ::v-deep.van-steps {
    background-color: #f8f9fd;
  }
  ::v-deep.van-step--vertical {
    padding-bottom: 0;
  }
  ::v-deep.van-icon {
    color: #0A8EFF !important;
    font-size: 16px;
  }
  ::v-deep.van-step__line {
    width: 1px;
  }
  ::v-deep.van-button--normal {
    padding: 0 10px;
    height: 32px;
  }
  .time {
    font-size: 12px;
    color: #717171;
  }
  .time-box {
    font-size: 13px;
    margin: 5px 10px 0 5px;
    padding: 12px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0px 0px 9px 2px rgba(221, 221, 221, 0.31);
    .box {
      display: flex;
      justify-content: flex-start;
      padding-bottom: 7px;
      .time-left {
        color: #AAAAAA;
      }
      .time-right {
        color: #2A2A2A;
        margin-left: 5px;
      }
    }
    .title {
      font-size: 16px;
      color: #2A2A2A;
      padding: 5px 0 10px;
      margin-bottom: 13px;
      border-bottom: 1px solid #F5F5F5;
    }
    .flex {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 256px;
    }
    .btn {
      transform: translateY(-14px);
    }
    .box1 {
      height: 23px;
    }
    .num {
      color: #FF3939;
    }
    .num1 {
      color: #8FD528;
    }
    .num2 {
      color: #FFA654;
    }
  }
  ::v-deep.van-empty__description {
    margin-top: 0;
  }
}
</style>
